<template>
  <!-- 指派给我的请求 -->
  <div class="find-request-box" v-loading="loading">
    <ProTable
      ref="proTable"
      :columns="columns"
      :request-api="getTableList"
      :data-callback="dataCallback"
      row-key="eno"
      :tool-button="false"
    >
      <!-- 标题 -->
      <template #etitle="scope">
        <el-link type="primary" @click="seeDetails(scope.row)">{{ scope.row.etitle }}</el-link>
      </template>
      <!-- 状态 -->
      <template #statusName="scope">
        <div v-if="scope.row.statusColor" :style="{ background: scope.row.statusColor }" style="color: #ffffff">
          {{ scope.row.statusName }}
        </div>
        <div v-else>{{ scope.row.statusName }}</div>
      </template>
    </ProTable>
    <!-- 请求详情弹窗 -->
    <DetailsMask ref="detailsMask"></DetailsMask>
  </div>
</template>

<script setup lang="ts" name="RequestBox">
import { ref, reactive } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance } from "@/components/ProTable/interface";
import { findRequest } from "@/api/modules/index";
import { useUserStore } from "@/stores/modules/user";
import DetailsMask from "@/components/Event/DetailsMask.vue";
import { useRouter } from "vue-router";

const router = useRouter();
defineOptions({
  name: "RequestBox"
});

const emit = defineEmits(["update"]);

const userStore = useUserStore();

// 表格配置项
const columns = reactive([
  { prop: "requestCode", label: "编号", width: 160 },
  { prop: "etitle", label: "标题", width: 160 },
  { prop: "requestCategoryName", label: "类型", width: 120 },
  { prop: "statusName", label: "状态", width: 110 },
  { prop: "createdOn", label: "创建时间", width: 165 },
  { prop: "createdByName", label: "请求人", width: 98 }
]);

// ProTable 实例
const proTable = ref<ProTableInstance>();

const loading = ref(false);

// 如果你想在请求之前对当前请求参数做一些操作
const getTableList = (params: any) => {
  loading.value = true;
  return findRequest({
    "requestQueryDTO.lastUpdater": userStore.username,
    "requestQueryDTO.currentUser": userStore.username,
    "requestQueryDTO.countQueryType": "assigneeToMyRequest",
    _search: false,
    sidx: "eno",
    sord: "desc",
    page: params.pageNum,
    rows: params.pageSize
  }).catch(() => {
    loading.value = false;
  });
};

// dataCallback 是对于返回的表格数据做处理
const dataCallback = (data: any) => {
  loading.value = false;
  return {
    list: data.data,
    total: data.totalSize,
    pageNum: data.page,
    pageSize: data.rows
  };
};

// 查看详情
const detailsMask = ref();
const seeDetails = (item: { eno: any }) => {
  console.log(item);
  // detailsMask.value.open(item);
  router.push("/eventManagement/index?detaileno=" + item.eno + "&random=" + Math.random());
};
</script>

<style scoped lang="scss">
.find-request-box {
  width: 100%;
  overflow: hidden;
  :deep(.card) {
    padding: 10px;
    border: none;
  }
}
</style>
